import { useAppStore } from '@/store/modules/app'
import {
  NDrawer,
  NDrawerContent,
  NGrid,
  NGi,
  NIcon,
  NSwitch,
  NSpace,
  NText,
  NSelect,
} from 'naive-ui'
import { defineComponent } from 'vue'
import styles from './index.module.scss'
import { SettingFilled, CloseOutlined } from '@vicons/antd'
import { Colors } from '@/config/color.config'
import { AnimateSpeed } from '@/config/transition.config'
import { useTrigger } from '@/hooks/core/useTrigger'

const appStore = useAppStore()

function triggerTheme(bool: Boolean) {
  if (bool) {
    appStore.TriggerTheme('light')
  } else {
    appStore.TriggerTheme('dark')
  }
}

interface TitleInterface {
  title: string
  class?: string
}

const Title = (props: TitleInterface) => (
  <div class={['py-2 mt-2', props.class]}>
    <span class={styles.setting_title}>{props.title}</span>
  </div>
)

interface ColorInterface {
  color: string
}
const ColorItem = (props: ColorInterface) => (
  <span
    style={{ backgroundColor: props.color }}
    title={props.color}
    onClick={() => {
      appStore.primary = props.color
    }}
    class={styles.color_item}
  ></span>
)

const SettingsDrawer = defineComponent(() => {
  if (!appStore.settingsShow) {
    return <div></div>
  }
  const [visible, { trigger: triggerVisible }] = useTrigger()

  // * 宽度
  const drawerWidth = '300px'
  return () => (
    <div>
      <div
        class={styles.setting_btn}
        style={{
          backgroundColor: appStore.primary,
          right: visible.value ? drawerWidth : 0,
        }}
        onClick={() => triggerVisible()}
      >
        <NIcon color="#fff" size={26}>
          {visible.value ? <CloseOutlined /> : <SettingFilled />}
        </NIcon>
      </div>
      <NDrawer z-index={9} width={drawerWidth} show={visible.value}>
        <NDrawerContent class={['text-center select-none']}>
          {/* 主题切换 */}
          <Title class="mt-1" title="主题" />
          <div>
            <NSwitch value={appStore.theme.name === 'light'} onUpdateValue={triggerTheme}>
              {{
                checked: () => '🌞',
                unchecked: () => '🌚',
              }}
            </NSwitch>
          </div>
          {/* 主色调切换 */}
          <Title title="主色调" />
          <NGrid cols={9}>
            {Colors.map(v => {
              return (
                <NGi>
                  <ColorItem color={v} />
                </NGi>
              )
            })}
          </NGrid>
          <Title title="导航栏" />
          <div>
            <NSpace justify="space-between" align="center">
              <NText>是否启用菜单栏缩放</NText>
              <NSwitch
                value={appStore.menuShowTrigger}
                onUpdateValue={(val: boolean) => (appStore.menuShowTrigger = val)}
              />
            </NSpace>
            <NSpace class="pt-2" align="center" justify="space-between">
              <NText>菜单栏缩放按钮位置</NText>
              <NSelect
                size="small"
                disabled={!appStore.menuShowTrigger}
                value={appStore.menuPosition}
                onUpdateValue={(val: 'left' | 'top' | 'bottom') => (appStore.menuPosition = val)}
                options={[
                  { label: '左侧', value: 'left' },
                  { label: '顶部', value: 'top' },
                  { label: '底部', value: 'bottom' },
                ]}
              ></NSelect>
            </NSpace>
            <NSpace class="pt-2" justify="space-between">
              <NText>手风琴模式</NText>
              <NSwitch
                value={appStore.menuAccordion}
                onUpdateValue={(val: boolean) => (appStore.menuAccordion = val)}
              />
            </NSpace>
          </div>
          <Title title="路由" />
          <div>
            <NSpace justify="space-between" align="center">
              <NText>使用动画</NText>
              <NSwitch
                value={appStore.routerTransition}
                onUpdateValue={(val: boolean) => (appStore.routerTransition = val)}
              />
            </NSpace>
            <NSpace class="pt-2" align="center" justify="space-between">
              <NText>路由动画</NText>
              <NSelect
                size="small"
                disabled={!appStore.routerTransition}
                value={appStore.routerTransitionType}
                onUpdateValue={(val: 'slide-left' | 'slide-right' | 'fade' | 'zoom') =>
                  (appStore.routerTransitionType = val)
                }
                options={[
                  { label: '淡入淡出', value: 'fade' },
                  { label: '右侧淡入', value: 'slide-right' },
                  { label: '左侧淡入', value: 'slide-left' },
                  { label: 'zoom', value: 'zoom' },
                ]}
              />
            </NSpace>
            <NSpace class="pt-2" align="center" justify="space-between">
              <NText>动画时长</NText>
              <NSelect
                size="small"
                disabled={!appStore.routerTransition}
                value={appStore.routerTransitionDuration}
                onUpdateValue={(val: AnimateSpeed) => (appStore.routerTransitionDuration = val)}
                options={[
                  { label: '0.5s', value: AnimateSpeed.FASTER },
                  { label: '0.8s', value: AnimateSpeed.FAST },
                  { label: '2s', value: AnimateSpeed.SLOW },
                  { label: '33', value: AnimateSpeed.SLOWER },
                ]}
              />
            </NSpace>
          </div>
        </NDrawerContent>
      </NDrawer>
    </div>
  )
})
export default SettingsDrawer
